<template>
    <div>
        <el-form class="searchForm" :model="searchForm" inline>
            <el-form-item prop="studentId">
                <el-input v-model="searchForm.studentId" placeholder="请输入学号"></el-input>
            </el-form-item>
            <el-form-item prop="studentName">
                <el-input v-model="searchForm.studentName" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getData" type="primary">查找</el-button>
                <el-button @click="openDialog('添加', 'add', null)" type="primary">添加</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
            border
        >
            <el-table-column label="学号" prop="studentId"></el-table-column>
            <el-table-column label="姓名" prop="studentName"></el-table-column>
            <el-table-column label="性别" prop="sex">
                <template slot-scope="scope">
                    <el-tag>
                        {{scope.row['sex'] | tableFilter(sexOptions)}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
            <el-table-column label="出生日期" prop="birthday"></el-table-column>
            <el-table-column label="身份证号" prop="identityCard"></el-table-column>
            <el-table-column label="民族" prop="nation"></el-table-column>
            <el-table-column label="籍贯" prop="nativePlace"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="openDialog('编辑', 'edit', scope.row)" type="primary" size="mini">编辑</el-button>
                    <el-button @click="deleteData(scope.row)" type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            :visible.sync="dialogVisible"
            :title="dialogTitle"
            :before-close="handleClose"
            width="500"
        >
            <el-form
                ref="dialogForm"
                :rules="formRules"
                :model="dialogFormData"
                label-width="100px"
            >
                <el-form-item label="学号" prop="studentId">
                    <el-input v-model="dialogFormData.studentId" v-show="show"></el-input>
                    <span v-show="!show">{{dialogFormData.studentId}}</span>
                </el-form-item>
                <el-form-item label="姓名" prop="studentName">
                    <el-input v-model="dialogFormData.studentName"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <template>
                        <el-radio-group v-model="dialogFormData.sex">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="2">女</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker
                        v-model="dialogFormData.birthday"
                        @change="changeData"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="dialogFormData.age" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="identityCard">
                    <el-input v-model="dialogFormData.identityCard"></el-input>
                </el-form-item>
                <el-form-item label="民族" prop="nation">
                    <el-select v-model="dialogFormData.nation" placeholder="请选择">
                        <el-option
                            v-for="item in nationOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="籍贯" prop="nativePlace">
                    <el-input v-model="dialogFormData.nativePlace"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm" type="primary">确定</el-button>
            </span>
        </el-dialog>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageIndex"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'studentList',
    componentTitle: '学生列表',
    data () {
        return {
            show: true,
            dialogVisible: false,
            dialogTitle: '添加',
            dialogType: 'add',
            dialogFormData: {
                studentId: '',
                studentName: '',
                sex: '',
                age: '',
                birthday: '',
                identityCard: '',
                nation: '',
                nativePlace: ''
            },
            tableData: [],
            pageInfo: {
                pageIndex: 1,
                pageSize: 10,
                total: 0
            },
            searchForm: {
                studentId: '',
                studentName: ''
            },
            sexOptions: [
                {label: '男', value: '1'},
                {label: '女', value: '2'},
            ],
            nationOptions: [
                {value: '1', label: '汉族'},
                {value: '2', label: '维吾尔族'},
                {value: '3', label: '苗族'},
                {value: '4', label: '藏族'},
                {value: '5', label: '鲜卑族'},
                {value: '6', label: '朝鲜族'},
            ],
            formRules: {
                studentId: [
                    {required: true, message: '请输入学号', trigger: 'change'}
                ],
                studentName: [
                    {required: true, message: '请输入姓名', trigger: 'change'}
                ],
                sex: [
                    {required: true, message: '请输入性别', trigger: 'change'}
                ],
                age: [
                    {required: true, message: '请输入年龄', trigger: 'change'}
                ],
                birthday: [
                    {required: true, message: '请输入出生日期', trigger: 'change'}
                ],
                identityCard: [
                    {required: true, message: '请输入身份证号', trigger: 'change'}
                ],
                nation: [
                    {required: true, message: '请输入民族', trigger: 'change'}
                ],
                nativePlace: [
                    {required: true, message: '请输入籍贯', trigger: 'change'}
                ],
            }
        }
    },
    mounted () {
        this.getData()
    },
    filters: {
        tableFilter (value, options) {
            let index = options.findIndex(item => {
                return Number(item.value) === Number(value)
            })

            if (index < 0) {
                return '---'
            } else {
                return options[index].label
            }
        }
    },
    methods: {
        changeData (age) {
            let date = new Date()
            let year = date.getFullYear()
            let biryear = age.substring(0, 4)
            this.dialogFormData.age = year - Number(biryear)
        },
        openDialog (title, type, row) {
            this.dialogVisible = true
            this.dialogType = type
            this.dialogTitle = title

            if (type === 'edit') {
                this.$nextTick(() => {
                    this.show = false
                    this.dialogFormData = Object.assign({}, row)
                })
            } else if (type === 'add') {
                this.show = true
            }
        },
        cancel () {
            this.dialogVisible = false
            this.$refs.dialogForm.resetFields()
        },
        confirm () {
            this.$refs.dialogForm.validate(valid => {
                if (valid) {
                    if (this.dialogType === 'add') {
                        this.addData()
                    } else if (this.dialogType === 'edit') {
                        this.editData()
                    }
                } else {
                    return false
                }
            })
        },
        getData () {
            axios({
                url: 'http://127.0.0.1:3000/api/student/list',
                method: 'get',
                params: {
                    pageIndex: this.pageInfo.pageIndex,
                    pageSize: this.pageInfo.pageSize,
                    ...this.searchForm
                }
            }).then(res => {
                console.log(res)
                this.tableData = res.data.data
                this.pageInfo.total = res.data.total
            })
        },
        addData () {
            axios({
                url: 'http://127.0.0.1:3000/api/student/add',
                method: 'post',
                data: {
                    ...this.dialogFormData
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.cancel()
                    this.$notify.success({title: '添加成功'})

                    this.getData()
                } else {
                    this.$notify.error({title: '添加失败'})
                }
            })
        },
        editData () {
            axios({
                url: 'http://127.0.0.1:3000/api/student/update',
                method: 'put',
                data: {
                    ...this.dialogFormData,
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.cancel()
                    this.$notify.success({title: '编辑成功'})

                    this.getData()
                } else {
                    this.$notify.error({title: '编辑失败'})
                }
            })
        },
        deleteData (row) {
            this.$confirm('确定删除？').then(() => {
                axios({
                    url: 'http://127.0.0.1:3000/api/student/delete',
                    method: 'delete',
                    params: row
                }).then(() => {
                    this.$notify.success({title: '删除成功'})

                    this.getData()
                })
            })
        },
        handleClose (done) {
            this.$confirm('确定关闭？').then(_ => {
                console.log(_)
                done()
                this.cancel()
            }).catch(_ => {
                console.log(_)
            })
        },
         // 每页多少条切换
        handleSizeChange(value) {
            this.pageInfo.pageSize = value;

            this.getData();
        },
        // 当前页码的切换
        handleCurrentChange(value) {
            this.pageInfo.pageIndex = value;

            this.getData();
        },
    }
}
</script>

<style lang="scss" scoped>
    .searchForm {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }
</style>